.wechatPay {
  @apply w-screen h-screen fixed top-0 bg-bg overflow-y-auto px-4 flex flex-col items-center;
  z-index: var(--pop-index);
  animation: alls 0.3s ease;

  .title {
    @apply fixed left-0 top-0 flex items-center w-full px-4 z-10;
    height: 4rem;
    background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);

    & > img {
      height: 1.375rem;
      width: 1.375rem;
      transform: rotate(90deg);
    }
  }

  .p1 {
    @apply text-lg font-bold text-white text-center;
    width: 16.875rem;
    margin-top: 4rem;
  }

  .p2 {
    @apply opacity-80 text-sm font-bold leading-4 mb-5;
    margin-top: 0.625rem;
    color: #d8d8d8;
  }

  .codeBox {
    @apply relative shrink-0;
    width: 15.625rem;
    height: 18.75rem;
    border: 2px solid #ffffff;
    border-radius: 0.8125rem;
    background-image: url('/images/h5-wechat-bg.webp');
    background-size: 100% 100%;

    .qrcode {
      @apply absolute left-2/4;
      transform: translateX(-50%);
      bottom: 1.875rem;
      @apply bg-white;
      width: 12.125rem !important;
      height: 12.125rem !important;
      border-radius: 0.5rem;
      border: 3px solid #ffb68b;
    }
  }

  .btnBox {
    @apply mt-5 mb-10;

    .btn {
      @apply text-white text-sm;
      width: 8.75rem;
      height: 1.875rem;
      background: #4b3200;

      &:first-child {
        margin-right: 0.625rem;
      }
    }
  }

  .pTitle {
    @apply text-white text-lg font-bold w-full;
  }

  .pTips {
    @apply text-sm w-full;
    color: #999999;
    margin: 0.625rem 0;
  }

  .pImg {
    @apply w-full;
    margin-bottom: 1.875rem;
  }
}

@keyframes alls {
  0% {
    left: 100vw;
  }

  100% {
    left: 0;
  }
}
